<template>
  <div class="mainnav">
    <div class="nav">
      <router-link tag="div" to="/" class="navbar">
        <span class="iconfont icon-31shouyexuanzhong" v-if="$route.path === '/'"></span>
        <span class="iconfont icon-31shouye" v-else></span>
        <p>首页</p>
      </router-link>

      <router-link tag="div" to="/search" class="navbar">
        <span class="iconfont icon-sousuoxuanzhong" v-if="$route.path === '/search'"></span>
        <span class="iconfont icon-sousuo_o" v-else></span>
        <p>搜索</p>
      </router-link>

      <router-link tag="div" to="/class" class="navbar">
        <span class="iconfont icon-boshimao1" v-if="$route.path === '/class'"></span>
        <span class="iconfont icon-boshimao" v-else></span>
        <p>课堂</p>
      </router-link>

      <router-link tag="div" to="/my" class="navbar">
        <span class="iconfont icon-my" v-if="$route.path === '/my'"></span>
        <span class="iconfont icon-wode" v-else></span>
        <p>我的</p>
      </router-link>
    </div>

    <RouterView />
  </div>
</template>

<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>

<style lang="scss" scoped>
.mainnav {
    .nav {
        background-color: #fff;
        z-index: 99;
      height: 55rem;
    width: 100%;
    position: fixed;
    bottom: 0rem;
    left: 0rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0rem 32rem 5rem;
    font-size: 14rem;
    .navbar {
      display: flex;
      flex-direction: column;
      align-items: center;
     p {
        color: #999;
      }

      span {
        font-size: 24rem;
        color: #666;
        margin-bottom: 2rem;
      }
      .icon-boshimao,.icon-sousuo_o{
        font-weight: bold;
      }
    }
    .router-link-exact-active{
        p,span{
            color: #000;
        }
    }
  }
}
</style>